<template>
        <view class="body-view">
            <scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft">
                <block v-for="(menuTab,index) in menuTabs" :key="index">
                    <view class="menu-one-view" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
                        <view :class="[currentTab==index ? 'menu-one-act' : 'menu-one']">
                            <view class="menu-one-txt">{{menuTab.name}}</view>
                            <view class="menu-one-bottom">
                                <view class="menu-one-bottom-color"></view>
                            </view>
                        </view>
                    </view>
                </block>
            </scroll-view>
            <swiper :current="currentTab" class="swiper-box-list" duration="300" @change="swiperChange">
                <block v-for="(swiperDate,index1) in swiperDateList" :key="index1">
                    <swiper-item>
                        <scroll-view class="swiper-one-list" scroll-y="true" @scrolltolower="loadMore(index1)">
<!--                            <block v-for="(swiperDate2,index2) in swiperDate" :key="index2">-->
<!--                                <view class="swiper-list-entity">-->
<!--                                    <view>{{swiperDate2}}</view>-->
<!--                                </view>-->
<!--                            </block>-->
                            <view class="my_works">
                                <view class="work_list">
                                    <view class="list">
                                        <view class="list_img">
                                            <image src="/static/img/img01.png" class="img"></image>
                                        </view>
                                        <view class="list_content">
                                            <view class="top">
                                                <view class="titles">
                                                    <view class="title">时光慢慢流逝</view>
                                                </view>
                                                <view class="des">
                                                    <view>鲍勃·迪伦 | 99+字</view>
                                                    <navigator url="../record/index" open-type="navigate" class="say">
                                                        <text class="iconfont play">&#xe61c;</text>
                                                        <view>朗读</view>
                                                    </navigator>
                                                </view>
                                            </view>
                                            <view class="bottom">
                                                <view class="icon">
                                                    <text class="iconfont ren">&#xe629;</text>
                                                    <view class="num">&nbsp;99+人读过</view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </block>
            </swiper>
        </view>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                scrollLeft: 0,
                isClickChange: false,
                currentTab: 0,
                menuTabs: [{
                    name: '文学畅销'
                }, {
                    name: '世界名著'
                }, {
                    name: '童音儿歌'
                }, {
                    name: '国学经典'
                }, {
                    name: '课文教材'
                }, {
                    name: '外语小课堂'
                }],
                swiperDateList: [[],[],[],[],[],[]]
            }
        },
        onLoad: function(e) {
            this.currentTab = e.id;
            //初始化数据
            for (var i = 0; i < this.swiperDateList.length; i++) {
                this.getDateList(i);
            }
        },
        methods: {
            swichMenu: async function (current) { //点击其中一个 menu
                if (this.currentTab == current) {
                    return false;
                } else {
                    this.currentTab = current;
                    this.setScrollLeft(current);
                }
            },
            swiperChange: async function (e) {
                let index = e.target.current;
                this.setScrollLeft(index);
                this.currentTab = index;
            },
            setScrollLeft: async function (tabIndex) {
                let leftWidthSum = 0;
                for (var i = 0; i <= tabIndex; i++) {
                    let nowElement = await this.getWidth('tabNum' + i);
                    leftWidthSum = leftWidthSum + nowElement.width;
                }
                let winWidth = uni.getSystemInfoSync().windowWidth;
                this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
            },
            getWidth: function (id) { //得到元素的宽高
                return new Promise((res, rej) => {
                    uni.createSelectorQuery().select("#" + id).fields({
                        size: true,
                        scrollOffset: true
                    }, (data) => {
                        res(data);
                    }).exec();
                })
            },
            loadMore: function (tabIndex) {
                console.log('正在加载更多数据。。。')
                this.getDateList(tabIndex);
            },
            getDateList: function (tabIndex) {
                for (var i = 0; i < 20; i++) {
                    var entity = this.menuTabs[tabIndex].name + (this.swiperDateList[tabIndex].length);
                    this.swiperDateList[tabIndex].push(entity);
                }
            }
        }
    }
</script>

<style lang='scss'>
    page {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        background: rgba(255, 255, 255, 1);
    }
    ::-webkit-scrollbar{
        width: 0upx;
    }
    .body-view {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
        width: 100%;
        align-items: flex-start;
        justify-content: center;
    }

    .top-menu-view {
        display: flex;
        white-space: nowrap;
        width: 100%;
        margin-top: 10upx;
        background-color: #FFFFFF;
        height: 75upx;
        /* 在这里设置导航条高度 */
    }

    .top-menu-view .menu-one-view {
        display: inline-block;
        white-space: nowrap;
        height: 100%;
    }

    .top-menu-view .menu-one-view .menu-one {
        /* 在这里写 单个按钮样式 */
        margin-left: 60upx;
        /*margin-right: 25upx;*/
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-txt {
        height: 24upx;
        font-size:$uni-font-size-base;
        font-weight: 400;
        color: $uni-color-664e37;
        line-height: 24upx;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
        width: 60%;
        height: 4upx;
    }

    .top-menu-view .menu-one-view .menu-one-act {
        /* 在这里写 单个按钮样式 */
        margin-left: 60upx;
        /*margin-right: 25upx;*/
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
        height: 24upx;
        font-size:$uni-font-size-base;
        font-weight: 400;
        color: $uni-color-fcb300;
        line-height: 24upx;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
        width: 32upx;
        height: 6upx;
        border-radius:4upx ;
        background: $uni-color-fcb300;
    }

    .swiper-box-list {
        flex: 1;
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
    }

    .swiper-one-list {
        height: 100%;
        width: 100%;
    }

    .swiper-one-list .swiper-list-entity {
        width: 100%;
        height: 75upx;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .my_works{
        width: 630upx;
        height: auto;
        margin: 0 auto;
        .my_works_heade{
            display: flex;
            align-items: center;
            padding: 40upx 0;
            .img{
                width: 37upx;
                height: 37upx;
                margin-right:14upx;
            }
            .my_works_title{
                font-size: $uni-font-size-base;
                color: $uni-color-664e37;
            }
        }
        .work_list{
            .list{
                display: flex;
                padding-top: 30upx;
                .list_img{
                    width: $uni-img-size-160;
                    height:  $uni-img-size-160;
                    border-radius: 20upx;
                    overflow: hidden;
                    box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.15);
                    position: relative;
                    .img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .list_content{
                    flex: 1;
                    margin-left: 30upx;
                    padding-top: 11upx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    border-bottom: 2upx solid #f2f2f2;
                    .top{

                        .titles{
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .title{
                                width: 100%;
                                /*overflow: hidden;*/
                                /*text-overflow:ellipsis;*/
                                /*white-space: nowrap;*/
                                font-size: $uni-font-size-16;
                                color: $uni-color-664e37;
                            }
                        }
                        .des{
                            display: flex;
                            justify-content: space-between;
                            font-size: $uni-font-size-12;
                            color: $uni-color-876a48;
                            .say{
                                width: 145upx;
                                height: 60upx;
                                border-radius: 30upx;
                                background-color: $uni-color-fcb300;
                                color: #fff;
                                font-size: $uni-font-size-13;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                .play{
                                    font-size: 30upx;
                                    margin-right:10upx;
                                }
                                .img{
                                    width: 35upx;
                                    height: 33upx;
                                }
                            }
                        }
                    }
                    .bottom{
                        display: flex;
                        box-sizing: border-box;
                        padding-bottom: 35upx;
                        .icon{
                            display: flex;
                            align-items: center;
                            padding-right: 32upx;
                            .ren{
                                color: $uni-color-876a48;
                                font-size: 26upx;
                            }
                            .num{
                                font-size: 26upx;
                                padding-left: 4upx;
                                color: $uni-color-876a48;
                            }
                        }

                    }

                }
            }
        }
    }
</style>